<template>
  <view class="chat-page" id="chat">
    <block v-for="item in list">
      <view :class="item.fromUserId == id ? 'chat-left' : 'chat-right'">
        <u-avatar
          slot="icon"
          shape="circle"
          size="35"
          :src="item.fromUserId == id ? chatUser.avatar : userInfoDetail.avatar"
        ></u-avatar>
        <view class="chat-text"> {{ item.message }} </view>
      </view>
    </block>
    <!-- <view class="chat-right">
      <view class="chat-text"> 你好 </view>
      <u-avatar
        slot="icon"
        shape="circle"
        size="35"
        :src="item.url"
        customStyle="margin: -3px 5px -3px 0"
      ></u-avatar>
    </view>
    <view class="chat-right">
      <view class="chat-text"> 你好哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 </view>
      <u-avatar
        slot="icon"
        shape="circle"
        size="35"
        :src="item.url"
        customStyle="margin: -3px 5px -3px 0"
      ></u-avatar>
    </view> -->
    <view class="chat-send">
      <u--textarea v-model="newData" placeholder="请输入内容" autoHeight></u--textarea>
      <view class="chat-send__btn">
        <u-button type="primary" text="发送" :disabled="sendDisabled" @click="sendNew"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      newData: '',
      chatUser: {},
      sendDisabled: false,
    }
  },
  computed: {
    list() {
      // this.list = this.chatObject[this.id].myChatLogRespList
      return this.$globalData.state.chatObject[this.id]?.myChatLogRespList || []
    },
  },
  onLoad(options) {
    // this.id = options.id
    // this.chatUser = uni.getStorageSync('chatUser')
    // uni.setNavigationBarTitle({ title: options.name })
    // this.$globalData.commit('setOneChatObject', {
    //   id: this.id,
    //   name: this.chatUser.name,
    //   avatar: this.chatUser.avatar,
    //   myChatLogRespList: [],
    // })
  },
  onReady() {
    this.scrollBottom()
  },

  methods: {
    //   sendNew() {
    //     let sendSocket = {
    //       sendType: 1,
    //       message: this.newData,
    //       targetUserId: this.id,
    //     }
    //     if (this.newData) {
    //       this.sendDisabled = true
    //       this.$socket.sendMsg(sendSocket, () => {
    //         this.sendDisabled = false
    //         this.$globalData.commit('setChatObject', {
    //           info: {
    //             ...sendSocket,
    //             ...{
    //               fromUserId: this.userInfoDetail.userId,
    //             },
    //           },
    //           type: 'send',
    //         })
    //         this.newData = ''
    //         this.scrollBottom()
    //       })
    //     }
    //   },
  },
}
</script>

<style lang="scss" scoped>
page {
  height: auto;
}
.chat-page {
  padding: 30rpx 30rpx 140rpx 30rpx;
  display: flex;
  flex-direction: column-reverse;
  .chat-left {
    display: flex;
    align-items: self-start;
    // width: 600rpx;
    padding: 20rpx 0;
    margin-right: 150rpx;
    .chat-text {
      background-color: #fff;
      border-radius: 12rpx;
      padding: 10rpx;
      margin-left: 10rpx;
    }
  }
  .chat-right {
    display: flex;
    align-items: flex-start;
    padding: 20rpx 0;
    flex-direction: row-reverse;
    margin-left: 150rpx;
    .chat-text {
      background-color: #3c9cff;
      color: #fff;
      border-radius: 12rpx;
      padding: 10rpx;
      margin-right: 10rpx;
    }
  }
  .chat-send {
    position: fixed;
    padding: 26rpx;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background-color: #fff;
    .chat-send__btn {
      width: 140rpx;
      margin-left: 20rpx;
    }
  }
}
</style>
